<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>在线交流后台管理</title>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"
          rel="stylesheet"/>
    <script src="https://cdn.bootcss.com/moment.js/2.11.1/moment-with-locales.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css" rel="stylesheet">

    <style>
        .panel-group {
            max-height: 770px;
            overflow: auto;
        }

        .leftMenu {
            margin: 10px;
            margin-top: 5px;
        }

        .leftMenu .panel-heading {
            font-size: 14px;
            padding-left: 20px;
            height: 36px;
            line-height: 36px;
            color: white;
            position: relative;
            cursor: pointer;
        }

        .leftMenu .list-group li {
            cursor: pointer;
        }

        .page ul {
            float: right;
        }

        .page .pageMenu li {
            float: left;
            list-style: none;
            margin: 5px;
        }

        .page .pageMenu li input {
            width: 80px;
        }

        .page .pageMenu li .btnSure {
            width: auto;
        }

        .pageMenu li.disabled a {
            color: #DDDDDD;
            cursor: not-allowed;
        }

        .page .pageMenu .last {
            margin-top: 2px;
        }

        .leftMenu .list-group .active {
            background-color: #658eb1;
            border-color: #658eb1;
        }

        th {
            text-align: center;
        }

        li.mousein {
            background-color: #DDDDDD;
        }
    </style>
</head>
<body>
<div class="row">
    <div class="col-md-2">
        <div class="panel-group table-responsive" role="tablist">
            <div class="panel panel-primary leftMenu">
                <!-- 利用data-target指定要折叠的分组列表 -->
                <div class="panel-heading" data-toggle="collapse"
                     data-target="#collapseListGroup1" role="tab">
                    <h4 class="panel-title">
                        系统管理
                    </h4>
                </div>
                <!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
                <div id="collapseListGroup1" class="panel-collapse collapse in" role="tabpanel"
                     aria-labelledby="collapseListGroupHeading1">
                    <ul class="list-group">
                        <li class="list-group-item active" name="alink"
                            link="index/app">
                            APP管理
                        </li>
                        <li class="list-group-item" name="alink"
                            link="index/user">
                            用户管理
                        </li>
                        <li class="list-group-item" name="alink"
                            link="index/message">
                            消息管理
                        </li>
                        <li class="list-group-item" name="alink"
                            link="index/autoreply">
                            自动回复
                        </li>
                    </ul>
                </div>
                <div class="panel-heading" data-toggle="collapse"
                     data-target="#collapseListGroup2" role="tab">
                    <h4 class="panel-title">
                        文档工具
                    </h4>
                </div>
                <div id="collapseListGroup2" class="panel-collapse collapse in" role="tabpanel"
                     aria-labelledby="collapseListGroupHeading1">
                    <ul class="list-group">
                        <li class="list-group-item" name="alink" link="index/download-page" onclick="gotoLink(this)">
                            js工具下载
                        </li>
                        <li class="list-group-item" onclick="gotoApi()">
                            在线api
                        </li>
                        <li class="list-group-item" onclick="gotoDownload('websocket-server API说明书.docx')">
                            api文档下载
                        </li>
                    </ul>
                </div>
            </div><!--panel end-->
        </div>
    </div>
    <div class="col-md-10">
        <div class="rightMainContent" id="rightMainContent"></div>
    </div>
</div>
<script>
    $(function () {
        $("#rightMainContent").load("index/app");
        $("li[name='alink']").click(function () {
            $(this).parent().parent().siblings("div").find('li').removeClass('active');
            $(this).parent().parent().parent().find('li').removeClass('active');
            $(this).addClass('active');
            if ($(this).attr('link')) {
                $("#rightMainContent").load($(this).attr('link'));
            }
        });
        $(".list-group-item").mousemove(function () {
            $(this).addClass('mousein');
        }).mouseout(function () {
            $(this).removeClass('mousein');
        })
    });

    function gotoLink(e) {
        $("#rightMainContent").load($(e).attr('link'));
    }

    function gotoApi() {
        window.location.href = "swagger-ui.html";
    }

    function gotoDownload(fileName) {
        fileName = encodeURI(fileName);
        var url = getRootPath() + "/static/download/" + fileName;
        window.location.href = "index/download?fileName=" + fileName + "&url=" + url;
    }

    function getRootPath() {
        //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp
        var curWwwPath = window.document.location.href;
        //获取主机地址之后的目录，如： uimcardprj/share/meun.jsp
        var pathName = window.document.location.pathname;
        var pos = curWwwPath.indexOf(pathName);
        //获取主机地址，如： http://localhost:8083
        var localhostPaht = curWwwPath.substring(0, pos);
        //获取带"/"的项目名，如：/uimcardprj
        var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
        return (localhostPaht + projectName);
    }
</script>
</body>
</html>
